<template>
    <view class="p-top20 p-bot30" :style="{ '--color': color }">
        <navBar title="服务卡详情"></navBar>
        <!-- <Sharer v-if="fromShare == 1"></Sharer> -->
        <ServerItem :goods="goods" :item_use="item_use"></ServerItem>
        <Records v-if="item_use.state == 1 && item_use.type == 1" :pageData="item_use" :goods="goods"></Records>
        <useNow
            v-if="item_use.state == 0 && item_use.type == 1"
            :qr="qr"
            :use_code="item_use.use_code"
            :cardid="item_use.card_id"
            :item_id="item_use.item_id"
            :shop_id="shop_id"
            :delivery="delivery"
            ref="useNow"
            @getDetail="getTimeItemDetail"
        ></useNow>

        <getNow v-if="item_use.type != 1 && item_use.state == 0" :use_code="item_use.use_code" @getDetail="getTimeItemDetail"></getNow>

        <Richtext :pageData="times_card_info.content"></Richtext>
        <Store :pageData="store_list" v-if="store_list.length"></Store>
    </view>
</template>

<!-- type  1商品 2优惠券 3余额 4积分', -->
<script>
    import { mapState } from 'vuex';
    import Sharer from '@/subCard/components/Sharer.vue';
    import ServerItem from '@/subCard/components/ServerItem.vue';
    import useNow from '@/subCard/components/useNow.vue';
    import getNow from '@/subCard/components/getNow.vue';
    import Richtext from '@/subCard/components/Richtext.vue';
    import Store from '@/subCard/components/Store.vue';
    import Records from '@/subCard/components/Records.vue';
    export default {
        components: {
            Sharer,
            ServerItem,
            Records,
            useNow,
            getNow,
            Richtext,
            Store
        },
        data() {
            return {
                fromShare: 0,
                headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',
                id: '',
                goods: '',
                item_use: '',
                times_card_info: '',
                store_list: [],
                qr: '',
                shop_id: '',
                delivery: []
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
            if (opt.shop_id) this.shop_id = opt.shop_id;
        },
        onShow() {
            this.getTimeItemDetail();
            if (this.item_use) this.$refs.useNow.getDeliveryInfo();
            // #ifdef MP-WEIXIN
            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                this.getTimeItemDetail();
            }
            // #endif
        },
        methods: {
            getTimeItemDetail() {
                this.$http
                    .get({
                        url: '/TimeCardApi/getTimeItemDetail',
                        data: {
                            id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        this.qr = result.qr;
                        this.goods = result.goods;
                        this.item_use = result.item_use_log_find;
                        this.times_card_info = result.times_card_info;
                        this.store_list = result.store_list || [];
                        this.delivery = result.delivery || [];
                    });
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'share_v_id'])
        },
        onShareAppMessage(res) {
            return {
                title: `${this.goods.name}`,
                path: `/pages/index/index?id=${this.id}&pageType=32&share_v_id=${this.vid}`, // 动态设置跳转路径
                imageUrl: this.goods.img // 分享图片链接
            };
        }
    };
</script>

<style>
    page {
        background-color: #f2f2f2;
    }
</style>
